<script setup>
import {del_Good, list_Good, modify_GoodStatus} from "@/api/good";
import {ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const goodData = ref([])
const listGoods = async () => {
  const res = await list_Good();
  if (res.code === 200) {
    goodData.value = res.data
  }
}
onMounted(() => {
  listGoods()
})
const deleteGood = async (row) => {
  // ElMessageBox.confirm('')
  const res = await del_Good(row.id)
  if (res.code === 200) {
    ElMessage.success('删除成功');
    await listGoods();// 演出之后再次查询
  }
}
const editGood = (row) => {

}
const handleStatusChange = async (row) => {
  const res = await modify_GoodStatus(row.id, row.status)
  if (res.code == 200) {
    ElMessage.success('修改成功')
  }
}
</script>

<template>
  <div>
    <el-table :data="goodData">
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="商品数量" prop="stock"></el-table-column>
      <el-table-column label="商品价格">
        <template #default="scope">
          {{ scope.row.price }}元
        </template>
      </el-table-column>
      <el-table-column label="商品介绍" prop="description">
      </el-table-column>

      <el-table-column label="商品状态">
        <template #default="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
              class="custom-switch"
          />
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="scope">
          <el-button type="primary" @click="editGood(scope.row)">编辑</el-button>
          <el-button type="primary" @click="deleteGood(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>

</style>
